<template>
	<div class="body" style="background-color:#f2f4f7 ;">
		<!-- 顶部 -->
		<div class="top">
			<div @click="toPage" class="">
				<i class="el-icon-back"></i>
				学习主页
			</div>

			<div class="topIN">
				<div class="">
					<img class="headPeacher" :src="userInfo.heard">
				</div>
				<div class="down" id="downs">
					<span class="thenName">{{userInfo.name}}</span>
					<i class="el-icon-arrow-down" id="downsSonOne"></i>
					<div class="inTrigger" id="downsSon">
						<div class="">
							<span class="tehHead"><i class="el-icon-user"></i></span>
							<span>进入空间</span>
						</div>
						<div class="">
							<span class="tehHead"><i class="el-icon-switch-button"></i></span>
							<span>退出登录</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- end -->
		<!-- 下面内容 -->
		<div class="underContent">
			<!-- 左边导航 -->
			<div class="myLeft">
				<!-- 课程 -->
				<div class="myCourse">
					<div class="">
						<img class="courseImg" :src="courseInfo.class_img">
					</div>
					<span class="courseName">{{courseInfo.title}}</span>
				</div>
				<!-- end -->
				<!-- <div class="">
					<div :class="[currin==index?'noSeIn':'noSe']" v-for="(item,index) in litName" :key="index"
						@click="tuchMenue(index)">
						<span :class="[currin==index?'setINIt':'setIN']"><i :class="item.pic"></i></span>
						<span>{{item.name}}</span>
					</div>

				</div> -->
				<div class="">
					<div :class="[currin==0?'noSeIn':'noSe']" @click="tuchMenue('0')">
						<span :class="[currin==0? 'setINIt':'setIN']"><i class="el-icon-menu"></i></span>
						<span class="">任&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;务</span>
					</div>
					<div :class="[currin==1?'noSeIn':'noSe']" @click="tuchMenue('1')">
						<span :class="[currin == 1?'setINIt':'setIN']"><i class="el-icon-s-order"></i></span>
						<span class="">章&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;节</span>
					</div>
					<div :class="[currin==2?'noSeIn':'noSe']" @click="tuchMenue('2')">
						<span :class="[currin==2?'setINIt':'setIN']"><i class="el-icon-s-management">
						</i></span>
						<span class="">资&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;料</span>
					</div>
					<div :class="[currin==3?'noSeIn':'noSe']" @click="tuchMenue('3')">
						<span :class="[currin==3?'setINIt':'setIN']"><i class="el-icon-s-claim"></i></span>
						<span class="">阶段评测</span>
					</div>
					<div :class="[currin==4?'noSeIn':'noSe']" @click="tuchMenue('4')">
						<span :class="[currin==4?'setINIt':'setIN']"><i class="el-icon-s-flag"></i></span>
						<span class="">综合评测</span>
					</div>
				</div>

			</div>
			<!-- end -->
			<!-- 右边内容 -->
			<div class="myRIght">
				<router-view></router-view>
			</div>
			<!-- end -->

		</div>
		<!-- end -->
	</div>
</template>

<script>
	export default {
		name: 'CourseStudy',
		data() {
			return {
				currin: '',
				courseInfo: [],
				userInfo: {},
				litName: [{
						name: '任务',
						pic: 'el-icon-menu'
					},
					{
						name: '章节',
						pic: 'el-icon-s-order'
					},
					{
						name: '资料',
						pic: 'el-icon-s-management'
					},
					{
						name: '阶段测评',
						pic: 'el-icon-s-claim'
					},
					{
						name: '综合测评',
						pic: 'el-icon-s-flag'
					}
				]
			}
		},
		methods: {

			toPage: function() {
				this.$router.push("MyCourse")
			},
			tuchMenue(e) {
				this.currin = e
				if (this.currin == 0) {
					this.$router.push('courseTask')
				} else if (this.currin == 1) {
					this.$router.push('chapter')
				} else if (this.currin == 2) {
					this.$router.push('detial')
				} else if (this.currin == 3) {
					this.$router.push('homework')
				} else if (this.currin == 4) {
					this.$router.push('exam')
				}
			},
			getRouter() {
				if (this.$route.path === '/courseTask') {
					this.currin = 0
				} else if (this.$route.path === '/chapter') {
					this.currin = 1
				} else if (this.$route.path === '/detial') {
					this.currin = 2
				} else if (this.$route.path === '/homework') {
					this.currin = 3
				} else if (this.$route.path === '/exam') {
					this.currin = 4
				}
			}

		},
		created() {
			this.courseInfo = JSON.parse(sessionStorage.getItem('classInfoV'))
			this.getRouter()
			this.userInfo = JSON.parse(sessionStorage.getItem('InfoMation'));
		}
	}
</script>

<style>
	#downs:hover #downsSon {
		height: 104px;
		transition: all 0.6s;
	}

	#downs #downsSon {
		transition: all 0.6s;
	}

	#downs #downsSonOne {
		transition: all 0.6s;
	}

	#downs:hover #downsSonOne {
		transform: rotate(180deg);
		transition: all 0.6s;
	}

	.tehHead {
		color: #9aa2af;
		margin-right: 10px;
	}

	.inTrigger {
		height: 0px;
		overflow: hidden;
		position: absolute;
		font-size: 18px;
		right: 28px;
		top: 58px;
		z-index: 99999999;
		background-color: #FFFFFF;
		width: 160px;
		border-radius: 8px;
		text-align: center;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.inTrigger div {
		padding: 16px;
	}

	.inTrigger div:hover:nth-child(1) {
		border-radius: 8px 8px 0 0;
		background-color: #f5f8fb;
		color: #81b4fd;
	}

	.inTrigger div:hover:nth-child(2) {
		border-radius: 0 0 8px 8px;
		background-color: #f5f8fb;
		color: #81b4fd;
	}

	.inTrigger div:hover .tehHead {
		color: #81b4fd;
	}

	.myRIght {
		width: 100%;
		min-height: 80vh;
		margin-left: 20px;
		margin-left: 20px;
		margin-top: 20px;
		background-color: #FFFFFF;
		padding: 16px 0;
		border-radius: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.noSeIn {
		justify-content: center;
		padding: 16px 0;
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 18px;
		cursor: pointer;
		background: #f0f6ff;
		color: #67a2ff;
	}

	.setIN {
		margin-right:8px;
		font-size: 26px;
		color: #acb4bf;
	}

	.setINIt {
		margin-right: 8px;
		font-size: 26px;
		color: #67a2ff;
	}

	.noSe {
		justify-content: center;
		padding: 16px 0;
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 18px;
		cursor: pointer;
	}

	.courseName {
		cursor: pointer;
		width: 140px;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		cursor: pointer;
		font-size: 18px;
		margin-top: 8px;
	}

	.courseImg {
		height: 76px;
		width: 140px;
		border-radius: 4px;
	}

	.myCourse {
		width: 100%;
		padding: 16px;
		display: flex;
		flex-direction: column;
	}

	.myLeft {
		margin-top: 20px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		width: 180px;
		border-radius: 0 7px 7px 0;
		top: 60px;
		background-color: #FFFFFF;
		padding-bottom: 20px;
		min-height: 88vh;
	}

	.underContent {
		/* margin-top: 1px; */
		width: auto;
		margin-right: 30px;
		/* background-color: #f9fafb; */
		display: flex;
	}

	.down {
		color: gray;
		transition: all 0.6s;
	}

	.down:hover {
		/* transition: all 0.6s;
		transform: rotate(180deg); */
	}

	.thenName {
		margin: 0 8px 0 24px;
	}

	.topIN {
		display: flex;
		align-items: center;
	}

	.headPeacher {
		margin-top: 5px;
		width: 28px;
		height: 28px;
		border-radius: 50%;
	}

	.top {
		width: auto;
		padding: 10px 30px;
		background-color: #FFFFFF;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		display: flex;
		justify-content: space-between;
		font-size: 20px;
		align-items: center;
		cursor: pointer;
		z-index: 9;
	}

	.body {
		height: 100vh;
	}
</style>
